ℹ️ To trigger the CI, please tick the checkbox below 👇

• Click to trigger kibana-pull-request for this PR!
• Click to trigger kibana-deploy-project-from-pr for this PR!
• Click to trigger kibana-deploy-cloud-from-pr for this PR!

💔 Build Failed

• Buildkite Build
• Commit: 5a6db51
• Cloud Deployment

Failed CI Steps

• FTR Configs #10
• FTR Configs #10
• FTR Configs #59
• FTR Configs #59
• FTR Configs #79
• FTR Configs #79
• FTR Configs #108
• FTR Configs #108

Test Failures

• [job] [logs] FTR Configs #79 / ObservabilityApp o11y sidenav sidenav & breadcrumbs renders the correct nav and navigate to links
• [job] [logs] FTR Configs #79 / ObservabilityApp o11y sidenav sidenav & breadcrumbs renders the correct nav and navigate to links
• [job] [logs] FTR Configs #108 / serverless observability UI Observability ML Notifications page displays only notification types for observability projects
• [job] [logs] FTR Configs #108 / serverless observability UI Observability ML Notifications page displays only notification types for observability projects
• [job] [logs] FTR Configs #59 / serverless security UI Security ML Notifications page displays only notification types for security projects
• [job] [logs] FTR Configs #59 / serverless security UI Security ML Notifications page displays only notification types for security projects
• [job] [logs] FTR Configs #10 / Solution navigation smoke tests observability solution sidenav & breadcrumbs renders the correct nav and navigate to links
• [job] [logs] FTR Configs #10 / Solution navigation smoke tests observability solution sidenav & breadcrumbs renders the correct nav and navigate to links

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

History

• 💔 Build #292054 failed 54c5456

@Dosant / @ek-so @L1nBra and I tested this. These are our notes:

NVDA(windows):

This is how it looks in NVDA first level screen:

Notice the list announcement here ^

On secondary nav,
When we hover on the secondary sidenav, the focus is on applications and if you press tab key, focus goes to infrastructure.

Voiceover:
First level screen:

On secondary nav,
When we hover on the secondary sidenav, the focus is on applications and if you press tab key, focus goes to infrastructure.

In both cases, the hover menu is not accessible and kinda just hanging there because mouse hover is still there.
@alexwizp is going to the code review and keep you posted. But both Lina and I would like to see the secondary nav go away when there is no focus on it.

💭 Looking at the keyboard navigation alone, it seems to work alright. The issue seem to be that keyboard + hover navigation does not quite work together as expected (I'm not sure it's a very likely scenario but we should ensure it works together anyway).
Hover closes any open sub nav and opens the current hovered one. If a user navigated with keyboard before, the focus is returned to the related button on closing of the previously open panel. This then creates the state that the opened sub nav is not accessible via keyboard navigation until it's manually closed and opened via keyboard navigation again because then the focus is moved to the first sub nav item.

If we assume hover is a "preview" of the content, it might be ok that the focus is not directly moved into the sub nav when using keyboard navigation, but what I would maybe expect is that the opened sub nav (due to hover) is not closed on onClick of the button, but instead the focus is moved into the sub nav since it's already open.
This by itself would still be confusing as it's semantically not clear the sub nav is open already due to hover. Since the buttons expand content we should in any case indicate their state (expanded) with aria-expanded.

When testing the navigation it did work in NVDA/Chrome and VO/Safari and VO/Chrome (when using VO click via control + option + Space but not with standalone Space or Enter) but it does not work with pure keyboard navigation. The sub nav always closes onClick first as it's opened due to hover.

Additional notes

The sub nav has heading and list but the list is not labelled. When the focus is moved to the first list item, the heading is skipped so the context is not available to screen reader users. We should make sure the ul elements have an accessible label to provide context and since there are already group labels, those could be reused via aria-labelledby

@bhavyarm, @mgadewoll, thank you so much for your time and feedback!

If we assume hover is a "preview" of the content, it might be ok that the focus is not directly moved into the sub nav

Yes, this was our assumption with @ek-so. I can see how confusing this might be, as the "preview" and "open" panels look the same and replace each other. In the next iteration of the side navigation, we plan to visually separate these two states.

I believe that given the complexity on so many fronts regarding this intermediate hover state, we should postpone the hover feature until we have a separate "preview" panel. I will close this pull request as a "failed attempt," and we will revisit the hover feature in the next iteration with a separate preview panel.

@mgadewoll, I also understand that you pointed out at least two accessibility improvements that we should make, which are independent of hover:

1. aria-expanded on the panel opener button
2. label the list in the sub nav with aria-labelledby

I'll track them as bugs to fix